<template>
  <div id="app">
    <div class="profile">
      <div v-for="(item, index) in List" :key="index" class="box">
        <img :src="item.img" class="photo" />
        <div class="info">
          <h1>{{ item.name }}</h1>
          <p class="text">{{ item.className }}</p>
          <p class="content">{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      List: [
        {
          img: require('@/assets/teacher1.png'),
          name: "李林燕",
          className: "硕士学历，硕士学位，高级工程师\n江苏省第五期“333高层次人才培养工程“中青年学术带头人培养对象，软件技术专业负责人。",
          content: "研究方向：软件开发与测试、人工智能应用、物联网技术应用、智慧城市应用\n 讲授主要课程：软件设计与测试、微信小程序、Python程序设计、Java程序设计、智能仓储系统设计",
        },
        {
          img: require('@/assets/teacher2.png'),
          name: "刘中原",
          className: "研究生学历，硕士学位，讲师，软件技术专业教研室主任。",
          content: "研究方向：移动应用开发、物联网技术应用\n讲授主要课程：移动应用开发、Java程序设计、C#程序设计\n发表省级期刊论文10余篇，获得“基于EMaC的超分辨率稀疏阵列波达角估计方法”发明专利一项，软件著作权三项",
        },
        {
          img: require('@/assets/teacher3.png'),
          name: "刘芳",
          className: "本科学历，硕士学位，副教授。",
          content: "研究方向：数据库技术、数据交互技术、软件技术\n讲授主要课程：MySQL数据库开发与应用、数据交互技术、Android移动应用开发等\n专利情况：获得“一种动态模糊控制系统”实用新型专利一项",
        },
      ]
    }
  },
};
</script>

<style scoped>
#app {
  padding: 20px;
}
.box {
  text-align: center;
  width: 300px;
  margin-right: 100px;
  margin-bottom: 20px;
}
.profile {
  display: flex;
  flex-wrap: wrap;
  /* background-color: pink; */
}

.photo {
  width: 180px; /* Adjust the size of the photo as needed */
}

.text {
  color: #666;
  font-size: 14px;
}
.content {
  white-space: pre-wrap;
  letter-spacing: 2px;
}
</style>
